html {
    /*标准字体大小设置 14 像素「rem 参照对象」*/
    font-size: 14px;
}
body {
    text-align: center;
}
.state-box .item {
    float: left;
    height: 1.25rem;
    line-height: 1.25rem;
    padding: 0 0.625rem;
    margin: 0 0.3125rem;
    border-radius: 0.3125rem;
    font-size: 0.75rem;
}

.state-box .item:first-child {
    padding-left: 0;
    color: #B0B5B8;
}

.state-box .item:nth-child(2) {
    color: #fff;
}

.state-box .item:nth-child(n+2) {
    padding: 0 0.1875rem;
    cursor: pointer;
}
.message-list {
    width: 56.25rem;
}

.message-box {
    display: flex;
    justify-content: space-around;
}

.message-box>.item {
    line-height: 1.25rem;
    padding: 0.3125rem 0 .8rem;
    cursor: pointer;
}

.message-box>.item.active {
    border-bottom: 2px solid #36A3F7;
}

.message-box>.item>.num {
    float: right;
    width: 1.5rem;
    margin-top: 2%;
    height: 1.125rem;
    line-height: 1.125rem;
    vertical-align: middle;
    margin-left: 0.1875rem;
    background-color: #F6506C;
    border-radius: 1.125rem;
    color: #fff;
    font-size: 0.75rem;
}

.message-box>.item:first-child>.num {
    background-color: #36A3F7;
}

.message-box>.item:last-child>.num {
    background-color: #9B9B9B;
}

.mian-search-box {
    margin-top: 1.875rem;
    display: flex;
}

.mian-search-box>div {
    padding: 0 1.25rem;
}

.mian-search-box input {
    border: .5px solid #b6b6b6;
    border-radius: 0.4375rem;
    padding: 0.3125rem 0;
}

.table-box {
    margin-top: 2.5rem;
}

.content .main-table {
    display: flex;
}

.content .table-hd>div {
    height: 2.4375rem;
    padding: 0.125rem 3.125rem;
}

.content .table-hd>div:nth-child(n+3) {
    line-height: 2.4375rem;
}

.content .table-body {
    padding: 1.25rem 0.625rem 1.25rem;
}

.content .table-body .main-table {
    height: 6.25rem;
    padding: 0.625rem 0;
}

.content .table-body .name {
    color: #36A3F7;
    width: 6.25rem;
    height: 5rem;
    line-height: 5rem;
}

.content .table-body .row-2,
.content .table-body .img-box {
    width: 5rem;
    height: 5rem;
}

.content .table-body .row-2 {
    margin-left: 3rem;
}

.content .table-body .row-3 {
    width: 9.0625rem;
    margin-left: 2.8125rem;
    padding-top: 0.9575rem;
}

.content .table-body .row-4 {
    padding-top: 1.25rem;
    width: 20rem;
    margin-left: 3.75rem;
}

.content .table-body .img-box img {
    float: left;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
